<template>
  <div>
    <van-search placeholder="请输入搜索关键词" />
    <van-tree-select
      :main-active-index="activeIndex"
      :items="categoryList"
      @click-nav="categoryClick"
      height="90vh"
    >
      <!-- Sidebar 侧边导航 -->
      <template #content>
        <van-image
          v-if="categoryList[activeIndex]"
          :src="categoryList[activeIndex].pic"
        />
        <!-- Swipecell   单元格 -->
        <van-card
          v-for="(item, index) in prodList.records"
          :key="index"
          @click="goToDetail(item)"
          :num="item.totalStocks"
          :price="item.price"
          :desc="item.brief"
          :title="item.prodName"
          :thumb="item.pic"
        />
      </template>
    </van-tree-select>
  </div>
</template>

<script setup name="category">
import { ref, onMounted } from "vue";
import { categoryInfo, pageProd } from "@/api/category.js";
import { useRouter } from "vue-router";
const activeIndex = ref(0);
const categoryList = ref([]);
const router = useRouter();
const prodList = ref([]);
onMounted(async () => {
  let result = await categoryInfo({ parentId: 0 });
  result.map((item) => {
    item.text = item.categoryName;
  });
  categoryList.value = result;
  categoryClick(activeIndex.value);
  // console.log(categoryList.value, "categoryList");
});
async function categoryClick(index) {
  // index   导航栏所在的下标
  activeIndex.value = index;
  prodList.value = await pageProd({
    categoryId: categoryList.value[index].categoryId,
  });
  // console.log(prodList.value, "prodList");
  console.log(categoryList.value);
}
function goToDetail(val) {
  console.log(val, "值");
  router.push({
    path: "/prodInfo",
    query: {
      ids: val.prodId,
    },
  });
}
</script>
<style lang="scss" scoped></style>
